<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui">
    <meta http-equiv="Content-Type" content="text/html; charset={{web.charset}}">
    {{web.src}}
</head>
<body class="mdui-theme-primary-indigo mdui-drawer-body-left mdui-color-grey-300">
{{web.header}}
{{web.drawer}}


<div class="mdui-typo">
    <h4 class="mdui-m-a-3">{{task}}<text id="count"></text></h4>
</div>
<div class="mdui-container">
    <button class="mdui-btn mdui-ripple mdui-color-theme mdui-m-b-1" onClick="create()">{{create-task}}</button>
    <div class="mdui-panel" id="panel" mdui-panel>
    </div>
</div>

<div class="mdui-dialog" id="create">
    <div class="mdui-dialog-content">
        <div class="mdui-typo">
            <p>{{task-i1}}<a href="https://www.minebbs.com/threads/cron.7043/">常用Cron表达式</a>,{{task-i2}}</p>
        </div>
        <div class="mdui-textfield">
            <label class="mdui-textfield-label">{{task-name}}</label>
            <input class="mdui-textfield-input" type="text" id="title" placeholder="{{name}}"/>
            <label class="mdui-textfield-label mdui-m-t-1">Cron{{expression}}</label>
            <input class="mdui-textfield-input" type="text" id="cron" placeholder="CRON EXPRESSION"/>
            <label class="mdui-textfield-label mdui-m-t-1">{{command}}({{cmd-line}})</label>
            <textarea class="mdui-textfield-input" type="text" id="cmd" placeholder="Command..."></textarea>
        </div>
    </div>
    <div class="mdui-dialog-actions">
        <button class="mdui-btn mdui-ripple" mdui-dialog-cancel>{{cancel}}</button>
        <button class="mdui-btn mdui-ripple" onClick="createSend()" mdui-dialog-confirm>{{confirm}}</button>
    </div>
</div>

</body>
<script>
{{js.websocket}}


		function create() {
		    document.getElementById('title').value = '';
		    document.getElementById('cron').value = '0 0 0 * * ? ';
		    document.getElementById('cmd').value = '';
			instCreate.open();
	        //instCreate.destroy();
		}

		function createSend() {
		    var json = {};
			json.type = "CREATE_TASK";
			json.token = getToken();
			json.title = document.getElementById('title').value;
			json.cron = document.getElementById('cron').value;
			json.command = document.getElementById('cmd').value;
			if (json.title == "" || json.cron == "" || json.command == "") {
			    tips("{{no-empty}}!");
			} else {
			    send(toString(json));
			}
		}

		function pauseTask(i) {
		    var json = {};
			json.type = "PAUSE_TASK";
			json.token = getToken();
			json.key = i;
			send(toString(json));
		}

		//建立连接事件
		ws.onopen = function(evt) {
			var json = {};
			json.type = "GET_TASKS";
			json.token = getToken();
			send(toString(json));
		};

		ws.onmessage = function(event) {
			var data = JSON.parse(event.data);
			if(data.type == "NO_PERMISSION") {
				gotoPage("login");
			} else if(data.type == "DIALOG") {
			    mdui.dialog({
                title: data.message,
                buttons: [
                    {
                      text: '{{confirm}}'
                    },]
                });
			} else {
			    console.log(data)
				var panel =document.getElementById('panel');
				panel.innerText = "";
				var count =document.getElementById('count');
				count.innerText = "(" + data.tasks.list.length + "):";
				for(var i=0;i < data.tasks.list.length;i++){
					var name = data.tasks.list[i].title;
					var cron = data.tasks.list[i].expression;
					var command = data.tasks.list[i].command;

					var item = document.createElement('div');
					item.className = "mdui-panel-item";

					var head = document.createElement('div');
					head.className = "mdui-panel-item-header";

					var run = document.createElement('i');
					run.innerText = "alarm_on";
					if(data.tasks.list[i].status) {
					    run.className = "mdui-icon material-icons mdui-text-color-green";
					} else {
					    run.className = "mdui-icon material-icons mdui-text-color-red";
					}

					var title = document.createElement('div');
					title.className = "mdui-panel-item-title mdui-m-l-3";
					title.innerText = name;

					var sub = document.createElement('div');
					sub.className = "mdui-panel-item-summary";
					sub.innerText = cron;

					var ic = document.createElement('i');
					ic.className = "mdui-panel-item-arrow mdui-icon material-icons";
					ic.innerText = "keyboard_arrow_down";

					var body = document.createElement('div');
					body.className = "mdui-panel-item-body";

					var typo = document.createElement('div');
					typo.className = "mdui-typo";

					for(var j=0;j < data.tasks.list[i].command.length;j++) {
					    var cmd = document.createElement('kbd');
					    var cp = document.createElement('p');
					    cmd.innerText = command[j];
					    cp.appendChild(cmd);
					    typo.appendChild(cp);
					}

					var button = document.createElement('button');
					button.className = "mdui-btn mdui-ripple mdui-color-theme mdui-m-a-1";
					button.innerText = "{{delete}}";
					button.setAttribute("onclick","deleteTask(" + i + ")");

                    var button1 = document.createElement('button');
					button1.className = "mdui-btn mdui-ripple mdui-color-theme mdui-m-a-1";
					if(data.tasks.list[i].status) {
					    button1.innerText = "{{pause}}";
					} else {
					    button1.innerText = "{{resume}}";
					}
					button1.setAttribute("onclick","pauseTask(" + i + ")");


					item.appendChild(head);
					item.appendChild(body);

					head.appendChild(run);
					head.appendChild(title);
					head.appendChild(sub);
					head.appendChild(ic);
					body.appendChild(typo);
					body.appendChild(button);
					body.appendChild(button1);
					panel.appendChild(item);
				}

			}
		}

function deleteTask(i) {
    open(i)
}

function open(i) {
			mdui.dialog({
			title: '{{confirm-operation}}',
			buttons: [
				{
				  text: '{{cancel}}'
				},
				{
				  text: '{{confirm}}',
				  onClick: function(inst){
					var j = {};
					j.token = getToken();
					j.type = "DELETE_TASK";
					j.key = i;
					send(toString(j));
					console.log(i)
				  }
				}
			  ]
			});
		}

var instCreate = new mdui.Dialog('#create');
</script>
</html>